<template>
  <div>
    <el-card>
      <el-form :model="currentData" label-width="100px">
        <el-form-item label="帖子ID">
          <el-input v-model="currentData.postVO.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="currentData.postVO.simpleUserInfoVO.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="currentData.postVO.simpleUserInfoVO.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-image :src="currentData.postVO.simpleUserInfoVO.avatar" fit="cover"></el-image>
        </el-form-item>
        <el-form-item label="帖子标题">
          <el-input v-model="currentData.postVO.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="帖子描述">
          <el-input v-model="currentData.postVO.description" disabled></el-input>
        </el-form-item>
        <el-form-item label="帖子配图">
          <div v-for="(pictureUrl, index) in currentData.postVO.pictureMap" :key="index">
            <el-image :src="pictureUrl" fit="cover"></el-image>
          </div>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="currentData.postVO.createTime" disabled></el-input>
        </el-form-item>

        <!-- 审核组件 -->
        <el-form-item label="审核状态">
        <el-select v-model="auditStatus" placeholder="请选择">
          <el-option label="通过" value="2"></el-option>
          <el-option label="驳回" value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item v-if="auditStatus === '3'" label="拒绝原因">
          <el-input v-model="rejectReason" placeholder="请输入拒绝原因"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAudit">提交审核</el-button>
          <el-button @click="getNext">下一条</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      // 当前的信息
      currentData: {
        postVO: {
          id: '',
          simpleUserInfoVO: {
            userId: '',
            nickname: '',
            avatar: '',
            hasFollowed: ''
          },
          title: '',
          description: '',
          pictureMap: [],
          createTime: ''
        }
      },

      auditStatus: '', // 当前选择的审核状态
      rejectReason: '', // 拒绝原因

      // 内容类型：帖子-2；故事-3；头像-5
      contentType: 2
    }
  },

  // 组件创建时获取第一条内容
  created () {
    this.getContent()
  },

  methods: {

    // 后端获取数据
    async getContent () {
      try {
        const response = await axios.get(`http://localhost:8080/pixington/audit/content/getOne/${this.contentType}`)
        if (response.data.code === 0) {
          // 后端数据返回前端
          this.currentData = response.data
        }
      } catch (error) {
        // 处理网络或其他错误
        console.error(error)
      }
    },

    // 如果没有审核，就不允许跳过
    getNext () {
      // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
      }
      this.getContent()
    },

    // 提交审核
    async submitAudit () {
      // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      if (this.auditStatus === '3' && !this.rejectReason) {
        // console.log(this.auditStatus)
        this.$message({
          message: '请填写拒绝原因',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      try {
        // 传输的数据
        const data = {
          id: this.currentData.id,
          status: this.auditStatus,
          rejectReason: this.auditStatus === '3' ? this.rejectReason : ''
        }
        const res = await axios.get('http://localhost:8080/pixington/audit/content', data)
        if (res.data.code === 0) {
          // 提交后获取下一条记录
          this.getContent()

          this.$message({
            message: '审核成功',
            type: 'success'
          })
        } else {
          // 处理错误情况
          this.$message({
            message: '审核失败',
            type: 'error'
          })
        }
      } catch (err) {
        // 网络请求错误处理
        console.error(err)
        this.$message({
          message: err.msg,
          type: 'error'
        })
      }
    }
  }
}
</script>

<style>

</style>
